// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]





// 1.需求:遍历数组apitypedata,把name属性值组成html代码，在把html代码房价apitypedata


//获取元素
let apibtn = document.querySelector('#apibt')
    //保存好组装的数据
let apiHTML = '';
apiTypeData.forEach(function(v) {

    apiHTML += `
    <button class='api-btn' data-keyword="${v.keyword}">${v.name}</button>
    `
})





//将组装好的数据渲染到apibtn中
apibtn.innerHTML = apiHTML;
// 需求: 点击apibtn下的button按钮
// let apibn = document.querySelectorAll('#apibt button')
//     //遍历
// apibn.forEach(function(dom) {
//     //注册点击事件
//     dom.addEventListener('click', function() {
//         // console.log(dom);
//     })
// })
// 需求: 点击apibtn下的button按钮
//获取元素
let apibtnn = document.querySelector('.api-b p span')
let apiinput = document.querySelector('.api-b p input') //输入框

apibtn.addEventListener('click', function(e) {

    if (e.target.nodeName === 'BUTTON') {
        // console.log(2);
        apibtnn.textContent = e.target.textContent;
        //获取当前的事件源的自定义属性
        // console.log(2);
        let keyword = e.target.dataset.keyword
        console.log(keyword)
            // 渲染到输入框
        apiinput.placeholder = keyword
    }
})






//列表数据渲染//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]


//需求,遍历listDataArr，组装成HTML代码,并渲染到li

//获取元素
let apic = document.querySelector('.api-c')

//定义变量保存代码
let listDataHtml = ''

listDataArr.forEach(function(v) {
        listDataHtml += `
        <li>
        <span ${v.isSpecial ? '.api-c li span' : ''}>企业专用</span>
        <img src="../imgs/${v.img}" alt="">
        <p>${v.name}</p>
        <a href="">${v.price === '免费' ? 'skyblue' : 'red'}</a>
        <button>申请数据</button>
    </li>
        `
    })
    //渲染到页面apic
apic.innerHTML = listDataHtml




//点击api-c li button出现蒙太框
//获取元素
let apbtn = document.querySelectorAll('.api-c li button')

let meng = document.querySelector('.meng')
let mengcheng = document.querySelector('.mengcheng')
let mengchenga = document.querySelector('.mengcheng-a')
apbtn.forEach(function(v) {

    v.addEventListener('click', function() {

        meng.style.display = 'block'
    })


})

meng.addEventListener('click', function() {

    meng.style.display = 'none'
})

mengcheng.addEventListener('click', function(e) {
    e.stopPropagation()
});
mengchenga.addEventListener('click', function(e) {
    e.stopPropagation()
})



//点击登录和扫码
let biaoqiana = document.querySelector('.biaoqian-a')
let biaoqianb = document.querySelector('.biaoqian-b')
    //点击事件
biaoqiana.addEventListener('click', function() {

    mengcheng.style.display = 'bolck'
    mengchenga.style.display = 'none'
})
biaoqianb.addEventListener('click', function() {

    mengchenga.style.display = 'bolck'
    mengcheng.style.display = 'none'
})